<template>
	<div>
		<span 
			class="customer_tags" 
			v-for="item in tagsAllList" 
			@click="tagsChecked(item)"
			:style="[{'background': item.color }, {'border-color': item.color}]">
			<span class="customer_tags_weight" :style="{color: item.color}">{{item.weight}}</span>
			{{item.name}}
			<span v-if="item.onTagsChecked"><i class="el-icon-success"></i></span>
		</span>
	</div>
</template>

<script>
	export default {
		props:['tagsList'],//后台传过来的选中的集合
		data() {
			return {
				tagsAllList:[],
				tagsCheckedList:[],
			}
		},
		created() {
			this.getAllTabel()
			this.pushBackgroundInList()
			this.upDateTagsList()
		},
		watch:{
			'tagsList':{
		        handler:function(val,oldval){
		            this.upDateTagsList();
		        },   
		    },
		},
		methods: {
			pushBackgroundInList(){
				var _tagsList = this.tagsAllList
				if(_tagsList && _tagsList.length!=0){
					for(var i=0; i<_tagsList.length; i++){
						_tagsList[i].onTagsChecked = false
					}
				}
			},
			upDateTagsList(){
				this.tagsCheckedList = []
				this.pushBackgroundInList();
				this.$forceUpdate();
				var _upDateTagsList = this.tagsList;
				if(_upDateTagsList && _upDateTagsList.length!=0){
					for(var i=0; i<_upDateTagsList.length; i++){
						for(var j=0; j<this.tagsAllList.length; j++){
							if(_upDateTagsList[i].id == this.tagsAllList[j].id){
								this.tagsAllList[j].onTagsChecked = true
								this.tagsCheckedList.push(this.tagsAllList[j].id)
								this.$forceUpdate();
							}
						}
					}
				}
			},
			getAllTabel(){
				var that = this
				this.$http.post('/cc/customer/label/all', {}).then(resp => {
					console.log("获取所有的客户标签信息==>",resp)
					that.tagsAllList = resp.data;
				})

			},
			tagsChecked(item){
				item.onTagsChecked = !item.onTagsChecked
				this.$forceUpdate();
				var _tagsCheckedList = this.tagsCheckedList;
				if(_tagsCheckedList && _tagsCheckedList.length!=0){
					var _upDateTagsList = this.tagsList;
					var pushId = true
					for(var i=0; i<_tagsCheckedList.length; i++){
						if(item.onTagsChecked == false && this.tagsCheckedList[i] == item.id){
							pushId = false
							this.tagsCheckedList.splice(i,1)
							break;
						}
					}
					if(pushId == true){
						this.tagsCheckedList.push(item.id)
					}
				}else{
					this.tagsCheckedList.push(item.id)
				}
				this.$emit('childPostTags', this.tagsCheckedList);
			}
		}
	}
</script>
<style>
	.customer_tags{
		display: inline-block;
	    min-width: 80px;
	    padding: 0 5px;
	    margin-right: 15px;
	    margin-bottom: 20px;
	    text-align: center;
	    border: 1px solid;
	    border-radius: 8px;
	    color: #FFFFFF;
	    box-shadow: 0 4px 10px 0 rgb(0,0,0,.1);
	    cursor: pointer;
	}
	.customer_tags_weight{
		display: inline-block;
	    width: 18px;
	    height: 18px;
	    line-height: 18px;
	    text-align: center;
	    background: #fff;
	    border-radius: 25px;
	    font-weight: bold;
	}
</style>